const voice = document.querySelectorAll(".layui-tab-title li")[0]
const voicebutton = document.querySelector(".voice")
const voiceadd = document.querySelector(".voice-add")
voice.addEventListener("click", addvoice)
function addvoice() {
    const voicespans = document.querySelector(".voice-add span")
    if (voicespans !== null) {
        voiceadd.removeChild(voicespans);
    }
    // const voiceadd = document.querySelector(".voice-add")
    $(".top-right>span").text("已经上传的音频文件")
    voicebutton.style.display = "flex"
    // voicebutton.style.transform="translateX(250%)"
    voicebutton.style.opcative = 0
    voicebutton.style.left = 22 + "%"
    voicebutton.style.animation = "opca 0.75s ease-in-out"
    setTimeout(() => {
        voicebutton.style.animation = ""
    }, 750)
    voiceadd.style.display = "flex"
    // 运用定时器将他关闭
    // setTimeout(() => {
    //     voicebutton.style.display = "none"
    // }, 4000)
}
// 鼠标悬浮事件
voicebutton.addEventListener("mouseover", addspan)

function addspan() {
    // const voiceadd = document.querySelector(".voice-add")
    // 创建dom元素
    const voicespan = document.createElement("span")
    voicespan.innerText = "添加语音"
    // 添加
    setTimeout(() => {
        // 在添加按钮的同时添加点击事件
        const voicespans = document.querySelector(".voice-add span")
        if (voicespans == null) {
            voiceadd.append(voicespan)
            const voicespans = document.querySelector(".voice-add span")
            const quxiao = document.querySelector(".quxiao")
            voicespans.addEventListener("click", inputadd)
            function inputadd() {
                const voiceinput = document.querySelector(".voiceadd")
                voiceinput.style.display = "flex"
                setTimeout(() => {
                    quxiao.style.display = "block"
                    quxiao.addEventListener("click", quxiaos)
                    function quxiaos() {
                        voiceinput.style.display = "none"
                        quxiao.style.display = "none"
                    }
                }, 750)
            }
        }
        else {
            console.log("已经成功添加");
        }
    }, 900)
}
voicebutton.addEventListener("mouseleave", updtaspan)
function updtaspan() {
    const voicespans = document.querySelector(".voice-add span")
    // 删除，同时更换动画
    voiceadd.removeChild(voicespans);
    voicebutton.style.animation = "small 0.75s ease-in-out"
    setTimeout(() => {
        voicebutton.style.display = "none"
    }, 780)
}
// 传输数据模块
const x = new Vue(
    {
        el: '.voiceadd',
        // 以函数的形式进行编码
        data:
        {
            name: "音频文件名",
            covie: ""
        },
        methods:
        {
            selectFile: function () {
                // 此时就用到了我们上面所说的 this.$refs 
                this.$refs.selectFile.click()
                // 这样就会触发 文件的选择
            },
        }
    }
);
// const divsssss=$("<div></div>")
// console.log(divsssss[0]);
const musicname = "";
const divs = document.querySelectorAll(".layui-tab-content div")[0]
const uls = divs.querySelector("ul")
// 页面互动
// 音频文件完成封装
var voicefiles = new FormData()
function checkFile(e) {
    console.log(12890e1820);
    const files = e.target.files
    if (files.length > 3) {
        alert("上传音频文件不得超过三个")
    }
    else {
        // 默认先跑一处次
        for (i = 0; i < files.length; i++) {
            const file = e.target.files[i]
            console.log(file);
            var fileName = file.name
            const divtop = document.createElement("div")
            divtop.prepend($("<span>文件名称：</span>")[0])
            divtop.append($("<span>" + fileName + "</span>")[0])
            const divnot = document.createElement("div")
            divnot.prepend($("<span>汉语翻译：</span> ")[0])
            divnot.append($("<input type='text' class='voicenames'>")[0])
            $(".voicefile").append(divtop)
            $(".voicefile").append(divnot)
            if (i == files.length - 1) {
                $(".voicefile").after($("<button class='layui-btn layui-btn-primary layui-border-black' onclick='loginFile(event)'>提交数据</button>")[0])
            }

        }
    }
}
// 音频翻译完成封装
function loginFile(e) {
    const files = $(".voiceadd input:nth-of-type(1)")[0].files
    console.log(files.length);
    const voicenames = document.querySelectorAll(".voicefile .voicenames")
    var voice = new FormData
    // 通过循环拿到多个音频
    for (var i = 0; i < files.length; i++) {
        const file = files[i]
        const filename = file.name
        const filetype = file.type
        // pop()删除数组最后一个值，同时返回，但是不会改变原数值，
        var fileExt = file.name.split('.').pop().toLocaleLowerCase()
        voice.append("voicefile", file)
        voice.append("name", voicenames[i].value)
        var fileName = file.name
        // 用于制作前端播放
        const li = document.createElement("li")
        // 将文件的内存路径存放在一个对象之中
        const fileurl = URL.createObjectURL(file)
        const audio = document.createElement("audio")
        const source = document.createElement("source")
        source.type = "audio/" + fileExt;
        audio.controls = true;
        audio.volume = '0.2';
        source.src = fileurl;
        li.innerHTML = fileName
        uls.append(li)
        li.append(audio)
        audio.append(source)
        if(i==files.length-1)
        {
            $(".voiceadd>button").remove()
            $(".voicefile>div").remove()
        }
    }
    // const voicenames=$(".voicefile div:nth-of-type(2n)>input")[0]
    // console.log(voicenames);
    // for(var i=0;i<voicenames.length-1;i++) 
    // {
    // voicename.append("第"+i+"音频翻译",voicenames[i].value)
    // }
    // ajax上传后台
    login(voice)

}

// 负责音频上传的ajax
function login(voice) {
    $.ajax({
        type: "post",
        //dataType:"json",
        url: "upload/music",
        processData: false,
        contentType: false,
        async: true,
        // contentType: "application/json",
        //data:JSON.stringify(Loginuser),
        data: voice,
        dataType: 'json',
        success: function (resule) {
            alert(resule);
        },
        error: function () {
            // alert(resule);
            console.log(11);
        }
    })
}
// 第二个模块，论文上传
const litwo = document.querySelectorAll(".layui-tab-title li")[1]
const textspan = document.querySelector(".layui-tab-content div:nth-child(2) span")
const textbutton = document.querySelector(".textbutton")
litwo.addEventListener("click", two)
function two() {
    $(".voice").css("display", "none")
    $(".top-right>span").text("已经上传的论文文章")
    // $(".layui-tab").css("position","")
}
const textquxiao = document.querySelector(".textquxiao")
// textquxiao.onclick=divquxiao()
textspan.addEventListener("click", spantwo)
// 为什么这一个图标无法成功
textquxiao.addEventListener("click", divquxiao)
$(".textupdate").bind("click", divquxiao)
function spantwo() {
    $("body").css("overflow", "hidden")
    $(".shadow").css("display", "block")
    $(".textadd").css("display", "flex")
    // $(".textquxiao").css("display","block")
}
// 什么叫固有属性的添加，value
// 自定义标签
// console.log($(".voice").attr("display","flex"));
function divquxiao() {
    $(".shadow").css("display", "none")
    $(".textadd").css("display", "none")
    $(".textquxiao").css("display", "none")
}
let formdatatwo = new FormData();
$(".textbutton").bind("click", textbutts)
function textbutts() {
    if ($(".biaoti>input").val().length == 0) {
        alert("标题没有填写，请注意填写")
    }
    else {
        if ($(".zuozhe>input").val().length == 0) {
            alert("作者没有填写，请注意填写")
        }
        else {
            if ($(".rqi>input").val().length == 0) {
                alert("发表日期没有填写，请注意填写")
            }
            else {
                if ($(".abstract>textarea").val().length == 0) {
                    alert("摘要没有填写，请注意填写")
                }
                else {
                    if ($(".zhengwen>textarea").val().length == 0) {
                        alert("正文没有填写，请注意填写")
                    }
                    else {
                        formdatatwo.append("biaoti", $(".biaoti>input").val())
                        formdatatwo.append("zuozhe", $(".zuozhe>input").val())
                        formdatatwo.append("rqi", $(".rqi>input").val())
                        formdatatwo.append("abstract", $(".abstract>textarea").val())
                        formdatatwo.append("zhengwen", $(".zhengwen>textarea").val())
                        // 负责论文上传的ajax
                        $.ajax({
                            type: "post",
                            //dataType:"json",
                            url: "adds.html",
                            traditional: true,
                            processData: false,
                            contentType: false,
                            async: true,
                            // contentType: "application/json",
                            //data:JSON.stringify(Loginuser),
                            data: formdatatwo,
                            dataType: 'json',
                            success: function (resule) {
                                alert(已经成功上传);
                                textadd()
                                $(".shadow").css("display", "none")
                                $(".textadd").css("display", "none")
                                $(".textquxiao").css("display", "none")
                            },
                            error: function () {
                                alert(resule);
                            }
                        })
                    }
                }
            }
        }
    }
}
const divstwo = document.querySelectorAll(".layui-tab-content div")[1]
const ulstwo = divstwo.querySelector("ul")
function textadd() {
    const li = document.createElement("li")
    const spanone = document.createElement("span")
    const spantwo = document.createElement("span")
    $(spanone).text($(".biaoti>input").val())
    $(spantwo).text($(".zuozhe>input").val())
    li.append(spantwo)
    li.append(spanone)
    ulstwo.append(li)
    console.log(ulstwo);
}


